<template>
    <view class="content">
        <view class="userInfoBox" style="" @tap="goUserEdit">
            <image class="headImg" :src="userInfo?.userImage" mode="" />
            <view class="loginState">{{ (userInfo?.nickname) ? (userInfo?.nickname) : '点击登录/注册' }}</view>
            <view class="user_phone" >{{ userInfo?.phone }}</view>
        </view>
        <view class="monnyInfoBox">
            <view class="monnyInfoItem" >
                <view class="number">{{ userInfo?.balance }}</view>
                <view class="label">充值余额</view>
            </view>
			<view class="monnyInfoItem" >
			    <view class="number">{{ userInfo?.redEnvelope }}</view>
			    <view class="label">红包余额</view>
			</view>
            <!-- <view class="monnyInfoItem" >
                <view class="number">{{userInfo?.redEnvelope}}</view>
                <view class="label">红包余额</view> -->
                <!-- </view> -->
               <!-- <view class="monnyInfoItem" bindtap="goKickback">
                <view class="number">{{userInfo.commission}}</view>
                <view class="label">佣金余额</view> -->
            <!-- </view> -->
           <!-- <view class="monnyInfoItem">
                <view class="number">{{ userInfo?.couponNum }}</view>
                <view class="label">优惠券</view>
            </view> -->
        </view> 
        
        <view class="level_infoBox">
            <view class="levelBox">
                <view style="width: 100%; display: flex; justify-content: center">
                    <image class="levelImg" src="/static/images/level_icon.png" mode="" />
                </view>
                <view class="level_text">{{ userInfo?.grade }}</view>
            </view>
            <view class="level_TipsBox">
                <view class="level_tips">约球置顶 约球优先展示 月月领优惠券</view>
                <view class="level_progress">
                    <view class="my_level">
                        我的等级
                        <text class="level_text" style="font-weight: bold">{{ userInfo?.grade }}</text>
                    </view>
                    <progress
                        :percent="userInfo?.gradeValue"
                        stroke-width="4"
                        border-radius="5"
                        activeColor="#F8E3AE"
                        backgroundColor="#585036"
                        style="width: 200rpx; margin: 0 10rpx"
                    />
                    <view class="levelNumber">{{ userInfo?.gradeValue }}/{{ userInfo?.growthValue }}</view>
                </view>
            </view>
            <!-- <image class="right_icon" src="/static/images/right_icon.png" mode="" /> -->
        </view>
        <view class="menuList">
            <view class="menuItem" @tap="goOrder">
                <image class="menu_icon" src="/static/images/order_icon.png" mode="" />
                <view class="menu_label">我的订单</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view>
            <!-- <view class="menuItem">
                <image class="menu_icon" src="/static/images/yaoqing.png" mode="" />
                <view class="menu_label">邀请好友</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view> -->
            <view class="menuItem" @click="goMemberCode" >
                <image class="menu_icon" src="/static/images/xiaofei.png" mode="" />
                <view class="menu_label">会员码</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view>
            <!-- <view class="menuItem">
                <image class="menu_icon" src="/static/images/xieyi.png" mode="" />
                <view class="menu_label">协议</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view> -->
            <view class="menuItem" v-if="userInfo?.identity == 1" @tap="goDataInfo">
                <image class="menu_icon" src="/static/images/data_icon.png" mode="" />
                <view class="menu_label">数据中心</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view>
            <view v-if="userInfo?.identity == 2" class="menuItem" @tap="goToPage('/pages/teachDataCenter/teachDataCenter')">
                <image class="menu_icon" src="/static/images/data_icon.png" mode="" />
                <view class="menu_label">我的收益</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view>
            <!-- <view class="menuItem">
                <image class="menu_icon" src="/static/images/hlep_icon.png" mode="" />
                <view class="menu_label">帮助中心</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view>  --> 
            <view class="menuItem" @click="goLogout" >
                <image class="menu_icon" src="/static/images/yaoqing.png" mode="" />
                <view class="menu_label">退出登录</view>
                <image class="right_icon" src="/static/images/right_icon.png" mode="" />
            </view> 
        </view>

        <uni-popup ref="qrcodeBox" class="qrcodeBox">
            <view class="qrcodeBox_content">
                <view class="qrcodeBox_content_title">
                    会员码
                </view> 
                <uqrcode v-if="isShowQrcode" style="margin: 0 auto !important;" ref="uqrcode"  size="150" canvas-id="qrcode" :value="userInfo?.userId" :options="options"></uqrcode>
            </view> 
        </uni-popup>

    </view>
</template>

<script setup>
import { ref, onMounted  } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getUserInfo } from '@/utils/user'
import { logout } from '@/utils/user'
import { showConfirm } from '@/utils/common'

// 响应式状态
const levelMax = ref(400)
const levelMin = ref(0)
const levelCurrent = ref(200)
const pageLevelNumber = ref(0)
const userInfo = ref(null)
const selected = ref(0)
const qrcodeBox = ref(null)
const isShowQrcode = ref(false)

// 计算等级百分比
const calculatePercent = () => {
    const percent = (levelCurrent.value / levelMax.value) * 100
    pageLevelNumber.value = percent
}

const options = {
    margin: 10,
}
const goMemberCode =() =>{
    qrcodeBox.value.open()
    setTimeout(() => {
        isShowQrcode.value = true
    }, 500)
    // isShowQrcode.value = true
}

const goLogout = () => {
    showConfirm('确定退出登录吗？').then(res => {
        if (res.confirm) {
            logout()
            uni.reLaunch({
                url: '/pages/Login/Login'
            })
        }
    })
}
const goUserEdit = () => {
    if (uni.getStorageSync('isLogin')) {
        goToPage('/pages/userInfoEdit/userInfoEdit')
    } else {
        goToPage('/pages/Login/Login')
    }
}



// 我的订单
const goOrder = () => {
    goToPage('/pages/order/order')
}

// 数据中心
const goDataInfo = () => {
    goToPage('/pages/dataCenter/dataCenter')
}

// 收益概况
const goTeachDataInfo = () => {
    goToPage('/pages/dataCenter/dataCenter')
}




const goToPage = (url) => {
    uni.navigateTo({
        url: url
    })
	
}

// 获取用户信息
const fetchUserInfo = () => {
    
    console.log(userInfo.value)
}

// 生命周期钩子
onMounted(() => {
    calculatePercent()
    fetchUserInfo()
})

onShow( async () => {
	if(uni.getStorageSync('isLogin')){
		const res = await getUserInfo()
		userInfo.value = res.result
        userInfo.value.phone = userInfo.value.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')

        //手动修改店长
        // userInfo.value.identity = 1
        // 手动修改为助教
        // userInfo.value.identity = 2
        


	}else{
		userInfo.value = null
        uni.showToast({
            title: '请先登录',
            icon: 'none'
        })
        setTimeout(()=>{
            uni.reLaunch({
                url: '/pages/Login/Login'
            })
        },1000)
	}
})
</script>

<style lang="scss" scoped>
page {
    background: linear-gradient(180deg, #dfebff 0%, #ffffff 46%), linear-gradient(268deg, #a4f9ff 0%, #e7e0ff 100%);
}
.qrcodeBox_content{
    width: 80vw;
    height: 400rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    
    box-sizing: border-box;
    .qrcodeBox_content_title{
        font-size: 32rpx;
        color: #000;
        font-weight: bold;
        margin-bottom: 20rpx;
        text-align: center;
    }
}
.content {
    width: 100%;
    padding: 0 28rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #dfebff 0%, #ffffff 46%), linear-gradient(268deg, #a4f9ff 0%, #e7e0ff 100%);

}

.userInfoBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(var(--status-bar-height) + 100rpx);
    // margin-top: 20rpx;
}

.headImg {
    width: 104rpx;
    height: 104rpx;
    border-radius: 6rpx;
}

.loginState {
    /* width: 208rpx; */
    height: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    padding-left: 16rpx;
}
.user_phone{
    font-size: 28rpx;
    color: #999999;
    padding-left: 16rpx;
}

.monnyInfoBox {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    margin-top: 48rpx;
}

.monnyInfoItem {
    width: 25%;
}

.number {
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
    text-align: center;
}

.label {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    text-align: center;
}

.level_infoBox {
    width: 100%;
    background: linear-gradient(90deg, #21262c 0%, #333238 100%);
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 24rpx 0;
    position: relative;
    margin-top: 36rpx;
}

.levelBox {
    width: 128rpx;
    border-right: 1rpx solid #333333;
}

.levelImg {
    width: 44rpx;
    height: 38rpx;
    margin: 0 auto 0;
}

.level_text {
    color: #f5ca5e;
    padding-top: 10rpx;
    text-align: center;
    font-size: 20rpx;
}

.level_TipsBox {
    padding-left: 32rpx;
}

.my_level {
    font-size: 24rpx;
    color: #f8e2a9;
}

.level_tips {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: rgba(248, 226, 169, 0.62);
}

.level_progress {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 18rpx;
}

.levelNumber {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: rgba(248, 226, 169, 0.76);
}

.right_icon {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.menuList {
    width: 100%;
}

.menuItem {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    background: #ffffff;
}
.menu_icon {
    width: 56rpx;
    height: 56rpx;
}
.menu_label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
}
</style>
